<template>
    <!-- 顶部 -->
    <div class="title">
      <span>商品类型搜索:</span>
      <a-input class="titleInput" v-model:value="value" placeholder="请输入" style="height: 5vh;" allowClear/>
      <a-button type="primary" style="height: 5vh;border-radius: 5px;" @click="search"><search-outlined />查询</a-button>
    </div>
    <!-- 主体显示 -->
    <div class="border">
      <a-button type="link" style="color:#fff; height: 5vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); " @click="showModal">
         <template #icon><PlusCircleOutlined /></template>
         新建
       </a-button>
      <!-- 表格主体 -->
      <div class="tab">
        <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="unkey" >
          <template #bodvCell="{ record }">
              <a style="margin-right: 0.5vw" @click="showModal1(record)">修改</a>
              <a style="margin-right: 0.5vw;color: red;" @click="showModal2(record)">删除</a>
          </template>
        </a-table>
      </div>
      <!-- 封装表单 -->
      <div>
          <a-modal v-model:visible="visible" title="新增商品类型" :footer="null" :afterClose="qxsj">
               <a-form
                   ref="formRef"
                   :model="formState"
                   :rules="rules"
                   :label-col="labelCol"
                   :wrapper-col="wrapperCol"
                 >
                   <a-form-item  label="商品类型名称:" name="name">
                       <a-input v-model:value="formState.name" style="width: 18vw;"/>
                   </a-form-item>
                   <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                     <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx">取消</a-button>
                     <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="onSubmit">确定</a-button>
                   </a-form-item>
                 </a-form>
          </a-modal>
          <a-modal v-model:visible="visible1" title="修改商品类型" :footer="null">
               <a-form
                   ref="formRef"
                   :model="seleone"
                   :rules="rules"
                   :label-col="labelCol"
                   :wrapper-col="wrapperCol"
                 >
                   <a-form-item  label="商品类型名称:" name="name">
                       <a-input v-model:value="seleone.name" style="width: 18vw;"/>
                   </a-form-item>
                   <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                     <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx1">取消</a-button>
                     <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="onSubmit1">确定</a-button>
                   </a-form-item>
                 </a-form>
          </a-modal>
          <a-modal v-model:visible="visible2"  :footer="null" :closable="false" width="26vw" style="border-radius: 5px;">
              <span>
                  <InfoCircleFilled style="color:#ff665f; font-size: 1.2rem;"/>
              </span>
              <span style="margin-left: 1vw; font-size: 1rem;">
                  删除后，将不能恢复，是否确定删除？
              </span>
              <div style="margin-top: 5vh; margin-bottom: 2vh;margin-left: 7vw;">
                  <span>
                      <a-button @click="handleQx2"> 取消</a-button>
                  </span>
                  <span style="margin-left: 2vw;">
                      <a-button style="background: #7f9dff;color:#fff;" @click="handleOk2"> 确定</a-button>
                  </span>
              </div>
          </a-modal>
      </div>
    </div>
  </template>
    
    <script   lang="ts">
  import { defineComponent, ref, reactive,toRaw,onMounted  } from "vue";
  import axios from 'axios'
  import {getsqlx} from "../../api/yu/splx"
  import { SearchOutlined, PlusCircleOutlined,InfoCircleFilled } from "@ant-design/icons-vue";
  
  const columns = [
    {
      title: "序号",
      dataIndex: "_id",
      width:"15vw",
    },
    {
      title: "商品类型名称",
      dataIndex: "commodityName",
      width:"53vw"
    },
  
    {
      title: "操作",
      dataIndex: "cz",
      // 设置插槽
      slots: {
        customRender: "bodvCell",
      },
    },
  ];
  
  
  export default defineComponent({
    components: {
      SearchOutlined,
      PlusCircleOutlined,
      InfoCircleFilled,
    },
    setup() {
      const data = ref([
       //  {
          // _id:1,
          // // 分类名称
       //    name: `饮料 `,
       //  },
      ])
      onMounted(() => {
          showLis()
      })
      const showLis=async()=>{
        let req = await getsqlx().then(res=>{
            data.value = res.data.data
        console.log(data);
        }).catch(
            res=>{
            data.value = res.data.data
        console.log(data);}
        )
       
        

        //   await axios.get(`http://localhost:3201/api/shopfl/list?seachname=${value.value}`).then(res=>{
        //       data.value=res.data.data
        //   })
      }
      const unkey=ref(1)
      const value = ref("");
      const visible = ref<boolean>(false);
      const showModal = () => {
        visible.value = true;
      };
      const showModal2 = (record) => {
        let arr=JSON.parse(JSON.stringify(record))
        seleone.value=arr
        visible2.value = true;
      };
      const handleQx = () => {
        visible.value = false;
      };
      const visible1 = ref<boolean>(false);
      const showModal1 = (record) => {
        let arr=JSON.parse(JSON.stringify(record))
        seleone.value=arr
        visible1.value = true;
      };
      const handleQx1 = () => {
        visible1.value = false;
      };
      const search=()=>{
          showLis()
      }
      const visible2 = ref<boolean>(false);
      const handleQx2 = () => {
        visible2.value = false;
      };
      const handleOk2 = () => {
        axios.delete(`http://localhost:3201/api/shopfl/del?_id=${toRaw(seleone.value)._id}`).then(res=>{
            showLis()
            visible2.value=false
        })
      };
      
      const seleone=ref({})
      let formState = reactive({
        name:""
      });
      const rules = {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 10, message: 'Length should be 1 to 10', trigger: 'blur' },
        ],
      };
      const formRef = ref();
      const onSubmit = () => {
        formRef.value
          .validate()
          .then(() => {
              // let obj={
              // 	_id:2,
              // 	name:toRaw(formState).name
              // }
           //  data.value.push(obj)
           // /api/shopfl/add
           axios.post(`http://localhost:3201/api/shopfl/add`,toRaw(formState)).then(res=>{
               showLis()
               visible.value=false
           })
          })
          .catch((error) => {
            console.log('error', error);
          });
      };
      const onSubmit1 = () => {
        formRef.value
          .validate()
          .then(() => {
              axios.put(`http://localhost:3201/api/shopfl/upde?_id=${seleone.value._id}`,toRaw(seleone.value)).then(res=>{
                  showLis()
                  visible1.value=false
              })
          })
          .catch((error) => {
            console.log('error', error);
          });
      };
      const resetForm = () => {
        formRef.value.resetFields();
      };
      const qxsj=()=>{
          formState.name=""
      }
      return {
          search,
        unkey,
        data,
        qxsj,
        value,
        columns,
        showModal2,
        formRef,
        labelCol: { span: 5 },
        wrapperCol: { span: 17 },
        visible,
        visible1,
        showModal,
        showModal1,
        handleQx,
        handleQx1,
        rules,
        onSubmit,
        onSubmit1,
        seleone,
        resetForm,
        formState,
        visible2,
        handleQx2,
        handleOk2,
      };
    },
  });
  </script>
    
    <style scoped lang='scss'>
  .title {
    // 顶部搜索框
    height: 8vh;
    width: 82vw;
    background-color: #fff;
    line-height: 8vh;
    padding-left: 20px;
    .titleInput {
      width: 12vw;
      margin-left: 1vw;
      margin-right: 1vw;
    }
  }
  .border {
    // 内容主体
    width: 82vw;
    background-color: #fff;
    margin-top: 2vh;
    padding-top: 2vh;
    padding-bottom: 3vh;
    padding-left: 1vw;
    .plcz {
      background-color: rgb(251, 244, 240);
      margin-left: 10px;
    }
    .tab {
      // 表格
      margin-top: 2vh;
    }
  }
  </style>
    